<!DOCTYPE html>
<html lang="en">
<head>

<!-- meta tags -->
<meta charset="utf-8">
<meta name="keywords" content="bootstrap 4, premium, multipurpose, ecommerce, html5, CSS" />
<meta name="description" content="Bootstrap 4 Landing Page Template" />
<meta name="author" content="www.themesground.com" />
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<!-- Title -->
<title></title>

  <!-- Favicon Icon -->
  <link rel="shortcut icon" href="assets/images/pagepig.ico" />

  <!-- inject css start -->

  <link href="assets/css/theme-plugin.css" rel="stylesheet" />
  <link href="assets/css/theme.min.css" rel="stylesheet" />

  <!-- inject css end -->

</head>

<body>

<!-- page wrapper start -->

<div class="page-wrapper">

  <!-- preloader start -->

  <div id="ht-preloader">
    <div class="loader clear-loader"> <img class="img-fluid" src="assets/images/loader.gif" alt=""> </div>
  </div>

  <!-- preloader end -->

  <!--header start-->

  <header class="site-header header-1">

    <div id="header-wrap">
      <div class="container">
        <div class="row">
          <!--menu start-->
          <div class="col">
            <nav class="navbar navbar-expand-lg navbar-light position-static">
              <a style="width: 64px;height: 64px;" href="index.html"> <img class="img-fluid" src="assets/images/pplogo.png" alt=""> </a>
              <a class="navbar-brand logo" href="index.html"> <img class="img-fluid" src="assets/images/logo001.png" alt=""> </a>
              <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button>
              <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ml-auto mr-auto">

                  <li class="nav-item dropdown position-static"> <a class="nav-link dropdown-toggle" href="#" style="color: red;">猪肉分类</a>
                    <div class="dropdown-menu w-100">
                      <!-- Tabs -->
                      <div class="container p-0">
                        <div class="row w-100 no-gutters">
                          <div class="col-lg-8 p-lg-3">
                            <div class="row">
                              <div class="col-12 col-md-3 col-sm-6">
                                <!-- Heading -->

                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">300天喂养</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">Caps &amp; Hats</a> </li>
                                  <li> <a href="#">Gloves &amp; Arm Warmers</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试 测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6">
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">特色黑猪</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-6 mb-md-0">
                                  <li> <a href="#">测试</a> </li>
                                  <li> <a href="#">Chains &amp; Necklaces</a></li>
                                  <li> <a href="#">Bangles &amp; Bracelets</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">Coins &amp; Bars</a></li>
                                  <li> <a href="#">Nose Rings &amp; Pins</a></li>
                                  <li> <a href="#">Beads &amp; Charms</a></li>
                                  <li> <a href="#">测试 Accessories</a></li>
                                  <li> <a href="#">测试</a></li>
                                </ul>
                              </div>
                              <div class="col-12 col-md-3 col-sm-6">
                                <!-- Heading -->
                                <div class="mb-2 font-w-5 text-link">熟食腊味</div>
                                <!-- Links -->
                                <ul class="list-unstyled mb-0">
                                  <li> <a href="#">Running Shoes</a> </li>
                                  <li> <a href="#">测试</a></li>
                                  <li> <a href="#">Loafers &amp; Moccasins</a></li>
                                  <li> <a href="#">Boots</a></li>
                                  <li> <a href="#">Formal Shoes</a></li>
                                  <li> <a href="#">Hiking Footwear</a></li>
                                  <li> <a href="#">测试 Shoes</a></li>
                                  <li> <a href="#">Ethnic Footwear</a></li>
                                  <li> <a href="#">Fashion 测试</a></li>
                                  <li> <a href="#">测试 Flats</a></li>
                                </ul>
                              </div>
                            </div>
                          </div>
                          <div class="col-lg-4 d-none d-lg-block pr-2"> <a href="#"><img class="img-fluid rounded-bottom rounded-top" src="assets/images/header-img.jpg" alt="..."></a> </div>
                        </div>
                      </div>
                    </div>
                  </li>
                  <li class="nav-item "> <a class="nav-link" href="about-us.html" data-toggle="dropdown">农场养殖</a>

                  </li>
                  <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">明星产品</a>
                    <ul class="dropdown-menu">
                      <li> <a href="about-us.html">About Us</a> </li>
                      <li> <a href="login.html">Login</a> </li>
                      <li> <a href="signup.html">Signup</a> </li>
                      <li> <a href="forgot-password">Forgot Password</a> </li>
                      <li> <a href="coming-soon.html">Coming Soon</a> </li>
                      <li> <a href="error-404.html">404 Error</a> </li>
                      <li> <a href="faq.html">FAQ</a> </li>
                      <li> <a href="privacy-policy.html">Privacy Policy</a> </li>
                      <li> <a href="terms-and-conditions.html">Term & Conditions</a> </li>
                    </ul>
                  </li>
                  <li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown">特色菜谱</a>
                    <ul class="dropdown-menu">
                      <li><a href="blog-grid.html">Blog Grid</a> </li>
                      <li><a href="blog-grid-left.html">Blog Grid Left</a> </li>
                      <li><a href="blog-grid-right.html">Blog Grid Right</a> </li>
                      <li><a href="blog-list-left.html">Blog List Left</a> </li>
                      <li><a href="blog-list-right.html">Blog List Right</a> </li>
                      <li><a href="blog-detail.html">Blog Detail</a> </li>
                      <li><a href="blog-detail-left.html">Blog Detail Left</a> </li>
                      <li><a href="blog-detail-right.html">Blog Detail Right</a> </li>
                    </ul>
                  </li>
                  <li class="nav-item"> <a class="nav-link" href="about-us.html">关于我们</a> </li>
                </ul>
              </div>
              <div class="right-nav align-items-center d-flex justify-content-end">
                <a href="login.html" >现在登录 &nbsp;</a>|
                <a href="signup.html" style="color: #000000;">&nbsp;注册</a>
                <div class="mr-1 mr-sm-3 search-block"> <a href="javascript:void(0);" class="search_trigger ml-3"></a>
                  <div class="search_wrap container"> <span class="close-search"><i class="ion-ios-close-empty"></i></span>
                    <form>
                      <input type="text" placeholder="Search" class="form-control" id="search_input">
                      <button type="submit" class="search_icon"><i class="las la-search"></i></button>
                    </form>
                  </div>
                </div>
                <a class="mr-1 mr-sm-3" href="my-account.html"><i class="las la-user-alt"></i></a>
                <div class="dropdown cart_dropdown"> <a class="d-flex align-items-center" href="#"> <span class="bg-white pr-2 pl-0 py-1 rounded" data-cart-items="2"> <i class="las la-shopping-bag"></i> </span> </a>
                  <div class="cart_box dropdown-menu dropdown-menu-right">
                    <ul class="cart_list">
                      <li> <a href="#" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="#"><img src="assets/images/product/p8.jpg" alt="cart_thumb1">招牌黑猪排骨</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>69.00</span> </li>
                      <li> <a href="#" class="item_remove"><i class="ion-ios-close-empty"></i></a> <a href="#"><img src="assets/images/product/p12.jpg" alt="cart_thumb2">招牌黑猪前腿</a> <span class="cart_quantity"> 1 x <span class="cart_amount"> <span class="price_symbole">$</span></span>81.00</span> </li>
                    </ul>
                    <!-- 购物车提交 -->
                    <div class="cart_footer">
                      <p class="cart_total"><strong>总金额:</strong> <span class="cart_price"> <span class="price_symbole">$</span></span>150.00</p>
                      <p class="cart_buttons" ><a href="/cart/shopping-cart.html" class="btn btn-secondary view-cart ml-2 mr-2">查看购物车</a><a href="localhost:8091/alipay" class="btn btn-primary ml-2 mr-2 checkout" onclick="itempay()">付款</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </nav>
          </div>
          <!--menu end-->
        </div>
      </div>
    </div>
  </header>

<!--header end-->


<!--hero section start-->

<section class="bg-light py-6">
  <div class="container">
    <div class="row align-items-center">
      <div class="col-md-6">
        <h1 class="h2 mb-0">我的购物车</h1>
      </div>
      <div class="col-md-6 mt-3 mt-md-0">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb justify-content-md-end bg-transparent p-0 m-0">
            <li class="breadcrumb-item"><a class="link-title" href="index.html">主页</a>
            </li>
            <!-- <li class="breadcrumb-item"><a class="link-title" href="#">Shop</a></li> -->
            <li class="breadcrumb-item active text-primary" aria-current="page">我的购物车</li>
          </ol>
        </nav>
      </div>
    </div>
    <!-- / .row -->
  </div>
  <!-- / .container -->
</section>

<!--hero section end--> 


<!--body content start-->

<div class="page-content">

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="table-responsive">
          <table class="cart-table table">
            <thead>
              <tr>
                <th scope="col">商品</th>
                <th scope="col">单价</th>
                <th scope="col">数量</th>
                <th scope="col">金额</th>
              </tr>
            </thead>
            <tbody  id="itemcart">
<!--append追加数据-->
            </tbody>
          </table>
        </div>
        
      </div>
      <div class="col-lg-4 pl-lg-5 mt-8 mt-lg-0" id="itemcartall">
<!--all  append追加数据-->
      </div>
    </div>
   
  </div>
</section>
<!-- ssssssss -->


<!--

<div class="page-content">

<section>
  <div class="container">
    <div class="row">
      <div class="col-lg-8">
        <div class="table-responsive">
          <table class="cart-table table">
			  -->
			  
			 <!-- --------------> 
<!--<div class="page-content">
	<div class="container">
		<div class="row">
			<div class="col-lg-8">
				<h3 class="">我的购物车</h3>
				<div class="table-responsive">
					
				</div>
			</div>
			&lt;!&ndash; /.box-header &ndash;&gt;
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
						    <th><input type="checkbox" id="checkAll">全选</th>
							<th>商品图片</th>
							<th>商品</th>
							<th>单价</th>
							<th>数量</th>
							<th>金额</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
					    <tr>
					       <td colspan="6">数据正在加载中...</td>
					    </tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100">
			  
			</div>-->
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>






  <!--底部 start-->

  <footer class="py-11 bg-dark-1">
    <div class="container">
      <div class="row">
        <div class="col-12 col-lg-4"> <a class="footer-logo text-white h2 mb-0" href="index.html"> <img class="img-fluid" src="assets/images/logo001.png" alt=""> </a>
        </div>
        <div class="col-12 col-lg-8 mt-6 mt-lg-0">
          <h5 style="color: white;">佩奇牧场，专注于提供高品质肉类生产及行业解决方案，通过创新技术引领现代农业革新，为中国消费者提供安全、美味的优质食品。</h5>
        </div>
      </div>
      <div class="row pt-9">
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-map-marker-alt ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">公司地址</h6>
              <p class="mb-0 font-w-4 text-muted">广东省珠海市</p>
              <p>香洲区国贸大厦88楼 佩奇牧场</p>
            </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-6 col-sm-12">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-envelope ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">联系邮箱</h6>
              <a class="text-muted font-w-4" href="mailto:themeht23@gmail.com"> pagepigmc@gmail.com</a><br>
              <a class="text-muted font-w-4" href="mailto:themeht23@gmail.com"> pqmc@gmail.com</a> </div>
          </div>
        </div>
        <div class="col-lg-4 col-md-12 col-sm-12 mt-md-3 mt-lg-0">
          <div class="d-flex footer-box">
            <div class="mr-4"> <i class="las la-mobile ic-2x icon-img"></i> </div>
            <div>
              <h6 class="mb-1 text-white font-w-5">联系我们</h6>
              <p class="mb-0 font-w-4 text-muted">   24/7客服<br>
                +400 888 2333 </p>
            </div>
          </div>
        </div>
      </div>
      <div >
        <br><br />
        <div style="text-align: center;color: white;"><small>Copyright ©&copy; 2020 佩奇牧场  pqmc.xyz All Rights Reserved</small> </div>
      </div>
    </div>
  </footer>

<!--back-to-top start-->

<div class="scroll-top"><a class="smoothscroll" href="#top"><i class="las la-angle-up"></i></a></div>

<!--back-to-top end-->

<!-- inject js start -->

<script src="assets/js/jquery-3.5.1.min.js"></script> <script src="assets/js/popper.min.js"></script> 
<script src="assets/js/bootstrap.min.js"></script> 
<script src="assets/js/owl.carousel.min.js"></script> 
<script src="assets/js/light-slider.js"></script> 
<script src="assets/js/parallax.js"></script> 
<script src="assets/js/magnific-popup.min.js"></script> 
<script src="assets/js/jquery.countdown.min.js"></script> 
<script src="assets/js/jquery.dd.min.js"></script> 
<script src="assets/js/validator.js"></script> 
<script src="assets/js/wow.js"></script> 
<script src="assets/js/theme-script.js"></script> 
<!-- inject js end -->
<script>
	
	
	/*查询数据库，显示购物车列表*/
	$(function(){
		/*alert("测试开始");*/
		$.ajax({
			url:"http://127.0.0.1:8891/cart/show",
			type:"get",
			contentType:"application/x-www-form-urlencoded; charset=utf-8",
			dataType:"json",
			/* data:{userId:1}, */
			success:function (data){
			  console.log(data.data);
              let itemList=data.data;
              let AllItemPrice=0;
			  for(let i=0;i<itemList.length;i++){
                let itemPrice=itemList[i].itemPrice/100;
                let oneItemPrice=(itemList[i].itemPrice*itemList[i].num)/100;
                AllItemPrice+=oneItemPrice;
				  let tr=`<tr>
                <td>
                  <div class="cart-thumb media align-items-center">
                    <a href="#">
                      <img class="img-fluid" src="${itemList[i].itemImage}" alt="">
                    </a>
                    <div class="media-body ml-3">
                      <div class="product-title mb-2"><a class="link-title" href="#">${itemList[i].itemTitle}</a>
                      </div>
                    </div>
                  </div>
                </td>
                <td> <span class="product-price text-muted">${itemPrice}</span>
                </td>
                <td>
                  <div class="d-flex align-items-center">
                    <button class="btn-product btn-product-up" value="${itemList[i].num}" name="${itemList[i].itemPrice}" cartId="${itemList[i].cartId}" onclick="delItemNum(this)"> <i class="las la-minus"></i>
                    </button>
                    <input  class="form-product" type="text" id="${itemList[i].itemId}" name="${itemList[i].itemId}" itemId="${itemList[i].itemId}" value="${itemList[i].num}">
                    <button class="btn-product btn-product-down" value="${itemList[i].num}" name="${itemList[i].itemPrice}" cartId="${itemList[i].cartId}" onclick="addItemNum(this)"> <i class="las la-plus"></i>
                    </button>
                  </div>
                </td>
                <td> <span class="product-price text-dark font-w-6" >    ${oneItemPrice}元</span>
                 <a  href="#" class="close-link" ><i class="las la-times" name="${itemList[i].cartId}" onclick="delItemByCartId(this)"></i></a>
                </td>
              </tr>`;

				  $("#itemcart").append(tr);

              }

			  let all=`<div class="border rounded p-5 bg-light-4">
          <h4 class="text-black text-left mb-2 font-w-6">总计</h4>
          <div class="d-flex justify-content-between align-items-center border-bottom py-3"> <span class="text-muted">总金额</span>  <span class="text-dark">￥ ${AllItemPrice}</span>
          </div>
          <div class="d-flex justify-content-between align-items-center border-bottom py-3"> <span class="text-muted">优惠金额</span>  <span class="text-dark">-0.00</span>
          </div>
          <div class="d-flex justify-content-between align-items-center pt-3 mb-5"> <span class="text-dark h5">订单金额</span>  <span class="text-dark font-w-6 h5">￥ ${AllItemPrice}</span>
          </div> <a class="btn btn-primary btn-animated btn-block" href="product-checkout.html">提交订单</a>
          <a class="btn btn-dark btn-animated mt-3 btn-block" href="itemList.html">继续购物</a>
        </div>`
              $("#itemcartall").append(all);
			}
		});
	});

	/*购物车页面点击X按钮删除一列*/
    function delItemByCartId(obj){
    let cartId=obj.getAttribute("name");
    $.ajax({
      
    })
  }



	/*购物车减商品，更新数量，更新数据库*/
    function delItemNum(obj){
      let cartId=obj.getAttribute("cartId");
      let _thisInput = $(obj).siblings("input");
      let num=_thisInput.val();
      let price=(obj.getAttribute("name"))/100;
      //alert(price)  32
      console.log("购物车商品的id="+cartId);
      if (num<=1){
        console.log("商品数量="+num+"不可减少");
        return true;
      }else {
        console.log("商品数量="+num+"修改后为"+(num-1));
        _thisInput.val(eval(_thisInput.val()) - 1);
        num=(eval(num) - 1);
        $.ajax({
          url:"http://127.0.0.1:8891/cart/changNum",
          type:"get",
          data:{num:num,cartId:cartId},
          contentType:"application/x-www-form-urlencoded; charset=utf-8",
          dataType:"json",
          success:function (data){}
        })
        //alert(num*price)  单个商品总价
        //let a=$('".'+cartId'"').val()
      }
    }

    /*购物车加商品，更新数量，更新数据库*/
    function addItemNum(obj){
      let cartId=obj.getAttribute("cartId");
      let _thisInput = $(obj).siblings("input");
      let num=_thisInput.val();
      console.log("购物车商品的id="+cartId);
      console.log("商品数量="+num+"修改后为"+(eval(num) + 1));
        _thisInput.val(eval(_thisInput.val()) + 1);
        $.ajax({
          url:"http://127.0.0.1:8891/cart/changNum",
          type:"get",
          data:{num:(eval(num) + 1),cartId:cartId},
          contentType:"application/x-www-form-urlencoded; charset=utf-8",
          dataType:"json",
          success:function (data){}
        })
    }
	
	
	
	
	
	
	
	
	
	
	
	
</script>
</body>
</html>
